<template>
  <div>
    <a-config-provider :locale="locale" :theme="theme">
      <router-view />
    </a-config-provider>
    <img src="/src/assets/images/KanBan.gif" ref="imgData" :draggable="true" @dragover="handleMouseDown" alt=""
      id="KanBan">
  </div>
</template>

<script setup lang="ts">
import { ref,onBeforeMount } from 'vue'
// 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import { storeToRefs } from 'pinia'
import themeStore from '@/store/theme'
import { toggleTheme } from "@/components/themeDark/index"

const store = themeStore()
const themeDatas: any = store.$state
const { themeColor, backColor, backColorText } = storeToRefs(store)
dayjs.locale('zh-cn')
const locale = zhCN
const theme = ref({
  token: {
    colorPrimary: themeColor,
    colorBgBase: backColor,
    colorTextBase: backColorText
  }
})

for (const key in themeDatas) {
  if (Object.prototype.hasOwnProperty.call(themeDatas, key)) {
    document.documentElement.style.setProperty('--' + key, themeDatas[key]);
  }
}

const imgData: any = ref(null)
const handleMouseDown = (event: any) => {
  const height = imgData.value.clientHeight
  const width = imgData.value.clientWidth
  const maxLeft = window.innerWidth - width
  const maxTop = window.innerHeight - height
  let moveLeft = event.clientX - height / 2
  let moveTop = event.clientY - width / 2
  if (moveLeft <= 0) { moveLeft = 0 }
  if (moveLeft >= maxLeft) { moveLeft = maxLeft }
  if (moveTop <= 0) { moveTop = 0 }
  if (moveTop >= maxTop) { moveTop = maxTop }
  imgData.value.style.left = moveLeft + 'px'
  imgData.value.style.top = moveTop + 'px'
}

const initDark = () => {
  const isDark = JSON.parse(localStorage.getItem('isDark') || 'false')
  if (isDark) {
    const dummyEvent = new Event('click')
    toggleTheme(dummyEvent)
  }
}

onBeforeMount(() => {
  initDark()
})

</script>

<style lang="scss">
@font-face {
  font-family: 'Yasong';
  src: url('src/assets/字魂风华雅宋.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Digital';
  src: url('src/assets/digital-7-4.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

#KanBan {
  position: absolute;
  width: 8%;
  bottom: 0;
  right: 0;
  z-index: 1000;
  border-radius: 50%;
  cursor: pointer;
}
</style>
